<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
        <style>
            .chart{
                width: 200px;
                height: 50px;
                background-color: orange;
            }

            .active{
                /* transition: width 3s; */
                transition: height 3s;
            }

            /* .box-leave-active {
                /* transition: width 1s; */
                /* transition: height 3s; */
            /*} */

            .hidden{
                /* width: 0px; */
                height: 0px;
            }

            .display{
                /* width: 200px; */
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="toggle">改变图形隐藏/显示</button>

            <transition enter-class="hidden" enter-to-class="display" enter-active-class="active"
            leave-class="display" leave-to-class="hidden" leave-active-class="active">
                <div class="chart" v-if="show"></div>
            </transition>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    show:true
                },
                methods:{
                    toggle() {
                        this.show = !this.show;
                    }
                }
            });
        </script>
    </body>
</html>